<script setup lang="ts">
import { ref } from "vue";
import { useCartStore } from "@/store/cart";
import SpecSelector from "@/components/spec-selector.vue";

const cartStore = useCartStore();
const specSelector = ref();
const spiceLevels = ref<string[]>([]);

const props = defineProps<{
  food: {
    id: number;
    name: string;
    value: number;
    context: string;
    url: string;
    specialty:string;
  };
}>();

const specOptions = props.food.specialty.split(",").map(s => ({ value: s, label: s }));

const showSpecSelector = () => {
  if(specOptions.length > 1){
    specSelector.value?.open(spiceLevels.value);
  }else{
    addToCart();
  }
};

const onSpecSelected = (specs: string[]) => {
  spiceLevels.value = specs;
  addToCart();
};

const addToCart = () => {
  cartStore.addItem({
    id: props.food.id,
    name: props.food.name,
    price: props.food.value,
    image: props.food.url,
    spiceLevels: spiceLevels.value,
  });
};
</script>


<template>
  <div class="food">
    <div class="food-left">
      <van-image width="100" height="100" :src="food.url" />
    </div>
    <div class="food-right">
      <h5>{{ food.name }}</h5>
      <p class="food-right-desc">{{ food.context }}</p>
      <p>¥{{ food.value }}</p>
    </div>
    <div class="food-car">
      <van-button
        icon="plus"
        size="small"
        type="primary"
        color="#ffe400"
        icon-color="#000"
        @click="showSpecSelector"
      />
    </div>
    <spec-selector ref="specSelector" :specs="specOptions" @confirm="onSpecSelected" />
  </div>
</template>

<style lang="scss" scope>
.food {
  &-car {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: block;
  }
  &-right {
    &-desc {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #000;
      font-size: 10px;
    }
    display: grid;
  }

  &-left {
    width: 110px;
  }
  position: relative;
  display: flex;
  color: #000;
  column-gap: 10px;
  background: #fff;
  padding: 5px;
  margin-bottom: 10px;
}
</style>
